<script setup  lang="ts">
import { downloadContract, getEnterpriseDetailAPI } from '@/apis/enterprise';
import type { EnterpriseDetail, Rent } from '@/types/enterprise';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

  const  route=useRoute()
// 存储企业详情数据
const   detail=ref<EnterpriseDetail>({} as EnterpriseDetail)
  const getDetail= async()=>{
       if(route.params.id){
        const res=await getEnterpriseDetailAPI(route.params.id as string)
        detail.value=res.data
       }
  }

  getDetail()
// 预览合同
const getPreviewUrl = (url: string) => {
  // 从链接中提取文件扩展名
  const extName = url.split('.').pop()
  // 如果是 pdf 可直接预览
  if (extName === 'pdf') {
    return url
  } 
  // 如果是 doc 或 docx 可通过微软提供的在线预览服务预览
  else if (extName === 'doc' || extName === 'docx') {
    // 微软提供的在线预览服务
    const previewURL = "https://view.officeapps.live.com/op/view.aspx?src=";
    // 返回拼接后的链接
    return previewURL +encodeURIComponent(url)
  }
}
// 下载合同
const downloadFile =async(row:Rent)=>{
    // 根据附件id下载合同
   const res=await downloadContract(row.contractId)
   console.log(res);
//    设置一个a标签
const aElement=document.createElement('a')
// 设置href属性wei blob数据的URL
aElement.href=URL.createObjectURL(res)
// 设置下载文件名
aElement.download=row.contractName
// 点击a标签，触发下载
aElement.click()
// 释放内存
URL.revokeObjectURL(aElement.href)
aElement.remove()
}

</script>

<template>
    <div class="detail-enterprise">
      <header class="add-header">
        <el-page-header content="查看企业" @back="$router.back()" />
      </header>
      <main class="add-main">
        <div class="form-container">
          <div class="title">租赁记录</div>
          <div class="table-container">
            <el-table :data="detail.rent" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50" />
              <el-table-column prop="name" label="租赁楼宇" width="180" />
              <el-table-column label="租赁起止时间" width="280">
                <template #default="{ row }">
                  {{ row.startTime }} - {{ row.endTime }}
                </template>
              </el-table-column>
              <el-table-column label="租赁合同(点击预览)">
                <template #default="{ row }">
                  <el-button type="primary"  link>
                    <!-- 预览a -->
                    <a class="link" :href="getPreviewUrl(row.contractUrl)" target="_blank">
                    {{ row.contractName }}
                  </a>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="录入时间" />
              <el-table-column prop="address" label="操作">
                <template v-slot="{row}">
                  <el-button type="primary"link   @click="downloadFile(row)" >合同下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </main>
  
    </div>
  </template>
  
  
  <style scoped lang="scss">

  .link{
    text-decoration: none;
    // 继承父级css属性
    color:inherit;
  }
  .detail-enterprise {
    background-color: #f4f6f8;
    height: 100vh;
  
    .add-header {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 64px;
      background-color: #fff;
  
      .left {
        span {
          margin-right: 4px;
        }
  
        .arrow {
          cursor: pointer;
        }
      }
  
      .right {
        text-align: right;
      }
    }
  
    .add-main {
      background: #f4f6f8;
      padding: 20px 130px;
  
      .form-container {
        background-color: #fff;
        margin-bottom: 20px;
  
        .title {
          height: 60px;
          line-height: 60px;
          padding-left: 20px;
        }
      }
  
      .table-container {
        padding: 20px;
      }
  
      .preview {
        img {
          width: 100px;
        }
      }
    }
  }
  </style>